<template>
  <div class="coupon-detail" v-if="coupon">
    <Scroll class="coupon-detail-scroll">
      <div class="content">
        <panel-coupon
          class="panel-coupon"
          @useCoupon="$router.push({path: '/my/coupon/coupon-detail/use-coupon'})"
          @shareClick="handleShareClick"
        />
        <div class="use-list" v-if="coupon.shares.length">
          <div class="list-item" v-for="(item, index) of coupon.shares" :key="index">
            <div class="left">
              <div class="avater">
                <img :src="item.portrait_url" alt />
              </div>
              <div class="info">
                <div class="name">{{item.nickname}}</div>
                <div class="phone">{{item.phone}}</div>
              </div>
            </div>
            <div class="right" v-if="item.status === 1">
              <img src="@/assets/images/yhx.png" alt />
            </div>
            <div class="right" v-if="item.status === 0">
              <img src="@/assets/images/212.png" alt />
            </div>
          </div>
        </div>
      </div>
    </Scroll>
    <transition name="slide">
      <router-view></router-view>
    </transition>
  </div>
</template>
<script>
import PanelCoupon from './panel-coupon'
import Scroll from '@/components/scroll/scroll'
import wx from 'weixin-js-sdk'
export default {
  components: {
    PanelCoupon,
    Scroll
  },
  data () {
    return {
      coupon: null
    }
  },
  created () {
    if (this.$route.query.coupon) {
      this.coupon = JSON.parse(this.$route.query.coupon)
    }
  },
  methods: {
    handleShareClick (couponInfo) {
      console.log(couponInfo, 'couponInfo')
      if (couponInfo.count > 0) {
        wx.miniProgram.getEnv(ress => {
          if (ress.miniprogram) {
            const designerId = JSON.parse(localStorage.getItem('USER'))
              .designer_id
            wx.miniProgram.navigateTo({
              url: `/pages/share/share?couponId=${couponInfo.id}&designerId=${designerId}`
            })
          }
        })
      } else {
        this.$toast('优惠券数量不够，暂不能分享~')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/mixin.scss";
@include slideEnter();
.coupon-detail {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  background: #f7f7f7;
  .coupon-detail-scroll {
    width: 100%;
    height: 100%;
    background: #fff;
  }
  .content {
    width: 100%;
    padding: 0.46rem 0.36rem;
    box-sizing: border-box;
    background: #fff;
    .panel-coupon {
      border: 1px solid rgba(238, 238, 238, 1);
    }
    .use-list {
      .list-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.58rem 0 0.28rem 0;
        width: 100%;
        border-bottom: 1px solid #b2b3b2;
        .left {
          display: flex;
          align-items: center;
          .avater {
            width: 0.8rem;
            height: 0.8rem;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 0.28rem;
            img {
              width: 100%;
            }
          }
          .info {
            .name {
              font-size: 0.28rem;
              font-family: PingFang SC;
              font-weight: 400;
              color: rgba(0, 4, 0, 1);
            }
            .phone {
              font-size: 0.22rem;
              font-family: PingFang SC;
              font-weight: 400;
              color: rgba(102, 102, 102, 1);
              margin-top: 0.19rem;
            }
          }
        }
        .right {
          width: 1.4rem;
          height: 0.78rem;
          img {
            width: 100%;
          }
        }
      }
    }
  }
}
</style>
